<template>
  <div class="recommend">
    <div class="wrap" ref="wrap">
      <div class="cont">
        <div class="recommend-item" v-for="(item,index) in recommendList" :key="index">
          <div class="recommend-img"><img :src="item.cover_url" lazy-load alt=""></div>
          <div class="recommend-name">{{ item.title }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import BScroll from "better-scroll";
export default {
  name: "Recommend",
  props:['recommendList'],
  updated() {
    let bScroll = new BScroll(document.querySelector('.wrap'),{
      probeType:3,
      startX: 0,
      click: true,
      scrollX: true,
      // 忽略竖直方向的滚动
      scrollY: false,
    })
    bScroll.on('scroll',(position) =>{
      console.log(position.x);
    })
    bScroll.refresh()
  }
}
</script>

<style scoped lang="css">

    .recommend{
      overflow: auto;
      /*height: auto;*/
      /*padding-bottom: 0px;*/
      width: 100%;
      height: 160px;
      display: flex;
      flex-wrap: nowrap;
      /*align-items: center;*/
      justify-content: center;
      /*margin-top: 10px;*/

    }

    .wrap{
      height: 160px;
      width: 375px;
      overflow: hidden;
    }
    .cont{
      height: 100%;
      width: 950px;
      display: flex;
    }
    .recommend::-webkit-scrollbar {display:none}
    .recommend-item{
      /*flex: 1;*/
      text-align: center;
      height: 120px;
      width: 95px;
    }
    .recommend-img{
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100%;
      height: 100%;

    }
    .recommend-img img{
      /*width: 100%;*/
      height: 100%;
    }
    .recommend-name{
      font-size: 14px;
      white-space: nowrap;
      overflow: hidden;
      text-align: center;
      text-overflow: ellipsis;
      /*padding: 4px;*/
    }
</style>